<!--
  * @Description: 求职-注册
  * @Author: rcc
  * @Date: 2024-08-20 10:03:33
  * @FilePath: /rc-recruitment/pages/user/register/register.vue
-->

<template>
  <view class="page-view page-image">
    <RcNavigation title="企服联聘" bgColor="transparent" />

    <view class="flex-1" style="overflow: hidden;">
      <scroll-view scrollY="true" style="height: 100%;">
        <view class="flex m-h30 m-t50">
          <image class="h-110" src="@/static/images/public/logo.png" mode="heightFix" />
          <text class="m-l10 text-700-140">欢迎来到企服联聘</text>
        </view>

        <view class="m-h30 m-t30 p-h50 p-t30 p-b24 bg-1 r-32">
          <text class="text-700-132">注册账号</text>

          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/phone.png" />
            <view class="line" />
            <text class="m-l24 text-700-130">+86</text>
            <input
              v-model="formData.phone"
              class="flex-1 p-h24"
              type="text"
              placeholder="手机号" />
          </view>
          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/lock.png" />
            <view class="line" />
            <input
              v-model="formData.password"
              class="flex-1 p-h24"
              type="safe-password"
              password
              placeholder="请输入密码" />
          </view>
          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/lock.png" />
            <view class="line" />
            <input
              v-model="formData.passwordVerify"
              class="flex-1 p-h24"
              type="safe-password"
              password
              placeholder="请再次输入密码" />
          </view>
          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/safety.png" />
            <view class="line" />
            <input
              v-model="formData.code"
              class="flex-1 p-h24"
              type="text"
              placeholder="验证码" />
            <view class="send text-700-526" @click="sendCode(formData.phone, 2)">{{ codeText }}</view>
          </view>

          <RcButton :top="75" text="注册" @click="submit" />

          <view class="flex-c w m-t40" @click="selectPact">
            <view v-if="!formData.isCheck" class="choose" />
            <view v-else class="choose-el flex-c">
              <image class="w-20 h-14" src="@/static/images/user/select.png" />
            </view>
            <text class="m-l10 text-400-426">我已阅读<text class="text-400-526" @click="toPactPage">《用户协议》</text></text>
          </view>
        </view>

        <view class="flex-c m-t40">
          <text class="m-l10 text-700-428">已有账号？<text class="text-700-528" @click="clickBack">去登录</text></text>
        </view>

        <view class="flex-d-c m-t90 p-b20">
          <view class="icon-view flex-c">
            <image class="w-56 h-47" src="@/static/images/public/wechat.png" />
          </view>
          <text class="m-t20 text-400-424">第三方注册</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { onUnload } from '@dcloudio/uni-app'

  import useCode from '@/hooks/use-code.ts'

  import RcButton from '@/components/button.vue'
  import RcNavigation from '@/components/navigation.vue'

  const {
    codeText,
    sendCode,
    clearCodeTimer,
  } = useCode()

  const isDisabled = ref(false)

  const formData = reactive({
    phone: '',
    password: '',
    passwordVerify: '',
    code: '',
    isCheck: false,
  })

  onUnload(() => {
    clearCodeTimer()
  })

  const selectPact = () => {
    formData.isCheck = !formData.isCheck
  }

  const formVerify = () => {
    if (isDisabled.value) return true

    if (formData.phone === '') {
      uni.$u.toast('请输入手机号')
      return true
    }

    if (formData.password === '') {
      uni.$u.toast('请输入密码')
      return true
    }

    if (formData.passwordVerify === '') {
      uni.$u.toast('请再次输入密码')
      return true
    }

    if (formData.password !== formData.passwordVerify) {
      uni.$u.toast('两次密码输入不一致')
      return true
    }

    if (formData.code === '') {
      uni.$u.toast('请输入验证码')
      return true
    }

    if (!formData.isCheck) {
      uni.$u.toast('请勾选用户协议')
      return true
    }

    return false
  }

  const submit = async () => {
    if (formVerify()) return

    isDisabled.value = true
    uni.showLoading({ title: '加载中...', mask: true })

    const data = {
      code: formData.code,
      mobile: formData.phone,
      password: formData.password,
      passwords: formData.passwordVerify,
    }

    const res = await uni.$u.post('/user/register', data)

    if (res.code === 1) {
      uni.navigateBack()
    } else {
      uni.$u.toast(res.msg)
    }

    isDisabled.value = false
  }

  const toPactPage = () => {
    uni.navigateTo({ url: '/pages/user/pact/pact' })
  }

  const clickBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss">
	page {
		background-color: $page-color-2;
	}
</style>

<style lang="scss" scoped>
	.page-view {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.page-image {
		height: 100%;
	}

	.card {
		width: 100%;
		height: 100rpx;
		margin-top: 30rpx;
		background: #F4F8FB;
		border-radius: 10rpx;

		.line {
			height: 64rpx;
			border-left: 1rpx solid $border-color-2;
		}

		.send {
			width: 180rpx;
			text-align: center;
			border-left: 1rpx solid $border-color-1;
		}
	}

	.choose {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		border: 2rpx solid $border-color-5;
	}

	.choose-el {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		background-color: $bg-color-2;
	}

	.icon-view {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1rpx solid $border-color-5;
	}
</style>
